<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
    let App={
        template:`
            <div>
                <button @click='getData'>发送请求</button>
            </div>
        `,
        methods:{
            getData(){
                // 配置公共数据
                this.$axios.defaults.baseURL = 'http://loacalhost:8080/';
                this.$axios.defaults.headers = {}; //覆盖原本默认头
                this.$axios.defaults.headers.accept='abc'; //走默认头。修改个别
                this.$axios.defaults.withCredentials=true;  //设置cookie
                let q1 = this.$axios.get('user',{
                    params: {ID: 12345},
                    // 和后台商议一个字段 XSRF-TOKEN 的COOKIE  前端会自动保存这个COOKIE
                    xsrfCookieName: 'XSRF-TOKEN', 

                    // 在每次发送请求的时候前端会 携带 X-XSRF-TOKEN 值为 XSRF-TOKEN 的COOKIE 后端用X-XSRF-TOKEN去接收
                    xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
                
                });
                let q2 = this.$axios.post('user','ID=12345',{
                    timeOut:10000,
                    transformResquest:function(data){
                        // 加工请求体数据
                        return 'ID=456';
                    }
                });
                this.$axios.all([q1,q2])
                .then(this.$axios.spread((res1,res2)=>{
                    // 全成功
                    console.log(res1);
                    console.log(res2);
                }))
                .catch((err)=>{
                    // 其一失败
                    console.log(err)
                })
            }
        }
    }
    // 组件内的每一个this对象，都是Vue的孩子
    // Vue祖宗的原型数据，就会共享给所有的孩子

    Vue.prototype.$axios=axios;

    new Vue({
        el:'#app',
        components:{
            App
        },
        template:"<app/>"
    })


</script>
</html>